<template>
  <div class="home-wrap global-wrap">
    <p class="global-title">请拍摄/上传身份证正反面，用以自动识别以下信息</p>
    <div class="idCard-wrap">
      <div class="img-item" v-if="idCardFrontImg">
        <choose-image
          :canChooseImg="canChooseImg"
          :cover="idCardFrontImg"
          ref="front"
          :typeKey="'front'"
          @resetImg="resetImg($event)"
          @success="success($event)"
        ></choose-image>
      </div>
      <div class="img-item" v-if="idCardBackImg">
        <choose-image
          :canChooseImg="canChooseImg"
          :cover="idCardBackImg"
          ref="back"
          :typeKey="'back'"
          @resetImg="resetImg($event)"
          @success="success($event)"
        ></choose-image>
      </div>
    </div>
    <div class="form-wrap">
      <van-form @submit="onSubmit" class="form" ref="formData">
        <div v-for="item in formConfig" :key="item.code">

          <!-- 下拉 -->
          <div v-if="item.source">
            <van-field
              class="field"
              v-model="formData[item.code + 'Str']"
              :required="item.isRequired"
              :name="item.code + 'Str'"
              :label="item.name"
              :rules="[{ required: item.isRequired, message: item.isRequired ? `${item.name}不能为空` : ''}]"
              @click="!item.enabled || isCheckConfirm || ['IDType', 'IDTypeStr'].indexOf(item.code) != -1 ? null : item.showItemPicker = true;"
              :disabled="!item.enabled || ['IDType', 'IDTypeStr'].indexOf(item.code) != -1 || isCheckConfirm"
            />
            <van-popup v-model="item.showItemPicker" round position="bottom">
              <van-picker
                show-toolbar
                :columns="item.columns"
                value-key="text"
                @cancel="item.showItemPicker = false"
                @confirm="item.showItemPicker = false; onConfirmPicker($event,item)"
              />
            </van-popup>
          </div>

          <!-- 日期 -->
          <div v-else-if="item.dataType == 'Date'">
            <van-field
              v-model="formData[item.code]"
              :required="item.isRequired"
              :name="item.code"
              :label="item.name"
              clear-trigger
              :rules="[{ required: item.isRequired, message: item.isRequired ? `${item.name}不能为空` : ''}]"
              @click="!item.enabled || isCheckConfirm ? null : item.showItemPicker = true;"
              :disabled="!item.enabled || isCheckConfirm"
            />
            <van-popup v-model="item.showItemPicker" round position="bottom">
              <van-datetime-picker
                type="date"
                title="选择时间"
                @cancel="item.showItemPicker = false; onCancelPicker($event,item)"
                @confirm="item.showItemPicker = false; onConfirmPicker($event,item)"
                :min-date="minDate"
                v-model="currentDate"
              />
            </van-popup>
          </div>

          <!-- 地区 -->
          <div v-else-if="item.code == 'City'">
            <van-field
              v-model="formData[item.code + 'Str']"
              :required="item.isRequired"
              :name="item.code"
              :label="item.name"
              clear-trigger
              :rules="[{ required: item.isRequired, message: item.isRequired ? `${item.name}不能为空` : ''}]"
              @click="!item.enabled || isCheckConfirm ? null : item.showItemPicker = true;"
              :disabled="!item.enabled || isCheckConfirm"
            />
            <van-popup v-model="item.showItemPicker" round position="bottom">
              <van-picker
                show-toolbar
                :columns="areaTree"
                value-key="text"
                @cancel="item.showItemPicker = false"
                @confirm="item.showItemPicker = false; onAreaConfirmPicker($event,item)"
              />
            </van-popup>
          </div>

          <div v-else>
            <!-- @input="onInput($event,item)" -->
            <!-- @blur="onBlur($event,item)" -->
            <van-field
              class="field"
              v-model="formData[item.code]"
              :required="item.isRequired"
              :name="item.code"
              :label="item.name"
              :maxlength="item.dataLength"
              :rules="[{ required: true, message: item.isRequired ? `${item.name}不能为空` : ''}]"
              :disabled="!item.enabled || ['IdCardNo'].indexOf(item.code) != -1 || isCheckConfirm"
            />
            <div v-if="item.code == 'BankName' && !isCheckConfirm" class="bank-box">
              <!-- <div class="bank-txt">银行卡信息识别</div> -->
              <choose-bank
                ref="bankImg"
                :typeKey="'bank'"
                @resetImg="resetImg($event)"
                @success="success($event)"
              ></choose-bank>
            </div>
          </div>
        </div>
        
        <div class="button-wrap" v-if="!isCheckConfirm">
          <van-button round block type="info" @click="onSubmit" :disabled="!canSubmit">保存</van-button>
        </div>
      </van-form>
    </div>


  </div>
</template>

<script>
import {AppConfig} from "@/config/app.config.js";
import loading from "@/globalComponents/Loading/loading";
import {
  Field,
  Form,
  Button,
  Dialog,
  Toast,
  Popup,
  Picker,
  DatetimePicker,
  Icon
} from "vant";
import vm from '@/main.js'
import ChooseImage from "@/components/chooseImage";
import ChooseBank from "@/components/chooseBank";
import { scanReturn } from "@/api/index";
import idCardFrontImg from "@/assets/image/入职人员信息_03.png";
import idCardBackImg from "@/assets/image/入职人员信息_05.png";
import bankCardFrontImg from "@/assets/image/银行卡正面.png";
import { getAddModel, analyseFront, analyseBack, analyseBank, save, getAreaTree } from "@/api";
import moment from "moment";

class InitData {
  id;
  cid;
  Name;
  IDType;
  IDTypeStr;
  IdCardNo;
  BirthDay;
  BirthDayStr;
  Sex;
  SexStr;
  Age;
  Race;
  Birthplace;
  IdCardStartTime;
  IdCardEndTime;
  Phone;
  BankName;
  AccountNo;
  EName;
  Duty;
  IdCardAddress;
  ResidentAddress;
  Email;
  EmergencyContact;
  EmergencyContactPhone;
  MaritalStatus;
  MaritalStatusStr;
  HasChildren;
  HasChildrenStr;
  ProfessionalTitle;
  Degree;
  SchoolName;
  GraduationDate;
  Discipline;
  OnBoardingDate;
  Department;
  EmployeeNo;
  EmployeeType;
  City;
  CityStr;
  BeHiring;
  AccoutName;
  PostWage;
  SalaryBank;
  SalaryBankStr;

  IDCardFrontAttachmentId;
  IDCardBackAttachmentId;
}


export default {
  name: "PersonInfo",
  components: {
    ChooseImage,
    ChooseBank,
    loading,
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Icon.name]: Icon,
  },
  data() {
    return {
      loginInfo: null,
      isSupplierAccount: null,
      formData: new InitData(),
      formConfig: null,
      idCardFrontImg: null,
      idCardBackImg: null,
      bankCardFrontImg,
      repeated: true, // 身份证校验结果，是否已经存在该员工
      idCardPattern: /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|30|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/,
      minDate: new Date(1900, 1, 1),
      currentDate: new Date(),
      areaTree: null,
      canChooseImg: true,
      canSubmit: true,
      isCheckConfirm: false, // 为true时表示该员工已经“确认入职”不允许调整
    };
  },
  watch: {
  },
  computed: {
  },
  beforeCreate() {
    
  },
  created() {
    
  },
  activated() {
    console.log('☆ idCardFrontImg', this.idCardFrontImg)
    this.canSubmit = true;
    this.isCheckConfirm = false;
    this.loginInfo = localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')) || null
    this.isSupplierAccount = this.loginInfo && this.loginInfo.isSupplierAccount || null
    if (localStorage.getItem('areaTree')) {
      this.areaTree = JSON.parse(localStorage.getItem('areaTree'))
      this.beforeGetAddModel()
    } else {
      this.getAreaTree()
    }
  },
  watch: {
  },
  methods: {
    // 获取所有城市树
    getAreaTree() {
      getAreaTree().then(res => {
        console.log('获取所有城市树: ', res)
        if (res.success) {
          this.areaTree = this.getTree(res.data)
          localStorage.setItem('areaTree', JSON.stringify(res.data))
          this.beforeGetAddModel()
        }
      }).catch(res => {
        if (res.code == 403) {
          this.$router.replace({path: 'login', query: {cid: this.$route.query.cid, tid: this.$route.query.tid}});
        }
      })
    },

    getTree(arr) {
      for (var i in arr) {
        arr[i].text = arr[i].label;
        if (arr[i].levelID == 4) {
          delete arr[i].children
        }
        if (arr[i].children) {
          this.getTree(arr[i].children);
        }
      }
      return arr
    },

    // 获取员工信息前判断
    beforeGetAddModel () {
      if (this.$route.query && this.$route.query.cid) {
        this.formData.cid = this.$route.query.cid;
        this.getAddModel()
      } else {
        Dialog.alert({
          title: "错误",
          message: "没有检测到二维码信息，请扫码重试！",
          theme: "round-button",
          confirmButtonText: "确定",
        });
      }
    },

    // 第一次进入H5员工信息页面时获取员工信息
    getAddModel() {
      this.idCardFrontImg = idCardFrontImg;
      this.idCardBackImg = idCardBackImg;
      console.log('☆ ☆ idCardFrontImg: ', idCardFrontImg)
      var params = {
        CompanyId: this.$route.query.cid,
        TemplateId: this.$route.query.tid,
      }
      getAddModel(params).then(resp => {
        console.log('☆ getAddModel resp: ', resp)
        if (!resp.code && resp.success) {
          this.getModalVals(resp)
        } else {
          if (resp.code == 'CheckConfirm') {
            this.isCheckConfirm = true;
            this.getModalVals(resp)
          } else {
            Dialog.alert({
              title: "错误",
              message: resp.message,
              theme: "round-button",
              confirmButtonText: "确定",
            });
            this.$router.replace({path: 'login', query: {cid: this.$route.query.cid, tid: this.$route.query.tid}});
          }
        }
      })
    },

    // 赋值表单
    getModalVals(res) {
      this.formData.id = res.data.id
      this.canChooseImg = res.data.id && this.isCheckConfirm ? false : true; // 有ID并且已入职情况下，不允许修改及上传身份证
      console.log('%c 第一次进入H5员工信息页面时获取员工信息: ', 'color:red', res)
      if (res.idCardFront) {
        this.formData.IDCardFrontAttachmentId = res.idCardFront.attachmentId;
        this.idCardFrontImg = AppConfig.imgURL + res.idCardFront.filePath;
      }
      if (res.idCardBack) {
        this.formData.IDCardBackAttachmentId = res.idCardBack.attachmentId;
        this.idCardBackImg = AppConfig.imgURL + res.idCardBack.filePath;
      }

      this.formConfig = res.config.map((item) => {
        if (item.source || item.dataType == 'Date' || item.code == 'City') {
          item.showItemPicker = false;
          item.columns = item.source ? item.source.map(col => {return {text: col.text, value: col.value}}) : null;
        }
        let codeKey = item.code.replace(item.code[0], item.code[0].toLocaleLowerCase())

        if (item.dataType == 'Date') {
          if (item.code == 'OnBoardingDate') {
            this.formData[item.code] = res.data[codeKey] && moment(res.data[codeKey]).format("YYYY-MM-DD") || moment(new Date()).format("YYYY-MM-DD");
          } else {
            this.formData[item.code] = res.data[codeKey] && moment(res.data[codeKey]).format("YYYY-MM-DD") || null;
          }
        } else if (item.code == 'City' && res.data.city) {
          let cityStr = res.data.city.slice(1, -1)
          console.log('cityStr: ', cityStr)
          this.formData.CityStr = this.areaTree ? (this.getTreeNames(cityStr.split(','))).join('/') : null;
          this.formData.City = cityStr.split(',');
          console.log('%c this.formData.CityStr: ', 'color:green', this.formData.City)
        } else if (item.source) {
          if (item.code == 'IDType') {
            let curObj = item.source.find(opt => {return opt.value == res.data.idType})
            this.formData.IDTypeStr = curObj && curObj.text || '中国居民身份证';
            this.formData.IDType = res.data.idType || 1;
          } else {
            let curObj = item.source.find(opt => {return opt.value == res.data[codeKey]})
            this.formData[item.code + 'Str'] = curObj && curObj.text || '';
            this.formData[item.code] = res.data[codeKey];
          }
        } else {
          this.formData[item.code] = res.data[codeKey]
        }
        return item
      })

      
      if (res.idCardFront) {
        this.handleIDCardFrontDisabled()
      }
      this.formData.Phone = this.isSupplierAccount ? null : (res.data.phone || this.loginInfo.phone) // 企业账户登录，手机号码不要默认值

      console.log('%c ❤ this.formData: ', 'color:red', this.formData)
    },

    // 下拉选择框选值确定
    onConfirmPicker(val, item) {
      console.log('val: ', val, ', item: ', item)
      if (item.dataType == 'Date') {
        const dateVal = moment(val).format("YYYY-MM-DD");
        this.formData[item.code] = dateVal;
      } else if (item.source) {
        this.formData[item.code + 'Str'] = val.text;
        this.formData[item.code] = val.value;
      } else {
        this.formData[item.code] = val;
        let curValObj = item.source.find(col => {return col.text == val})
        console.log('curValObj: ', curValObj)
      }
    },

    // 下拉选择框选值取消
    onCancelPicker(val, item) {
      console.log('val: ', val, ', item: ', item, ', oldVal: ', this.formData[item.code])
    },

    // 城市选择确定
    onAreaConfirmPicker(val, item) {
      console.log('val: ', val, ', item: ', item)
      this.formData[item.code + 'Str'] = val.join('/');
      let newArr = this.getTreeIds(val)
      console.log('newArr: ', newArr)
      this.formData[item.code] = newArr
    },

    // 根据城市名称查找ID
    getTreeIds(arr) {
      let newArr = [];
      this.areaTree.map(province => {
        if (province.text == arr[0]) {
          newArr.push(province.value)
          if (province.children) {
            province.children.map(city => {
              if (city.text == arr[1]) {
                newArr.push(city.value)
                if (city.children) {
                  city.children.map(area => {
                    if (area.text == arr[2]) {
                      newArr.push(area.value)
                    }
                  })
                }
              }
            })
          }
        }
      })
      return newArr
    },

    // 根据城市ID查找名称
    getTreeNames(arr) {
      if (arr && this.areaTree) {
        console.log('根据城市ID查找名称: ', arr)
        let newArr = [];
        this.areaTree.map(province => {
          if (province.value == arr[0]) {
            newArr.push(province.text)
            if (province.children) {
              province.children.map(city => {
                if (city.value == arr[1]) {
                  newArr.push(city.text)
                  if (city.children) {
                    city.children.map(area => {
                      if (area.value == arr[2]) {
                        newArr.push(area.text)
                      }
                    })
                  }
                }
              })
            }
          }
        })
        return newArr
      }
    },

    // 提交
    onSubmit(e) {
      this.canSubmit = false;
      console.log('xxxxxxxx 提交 xxxxxxxxxx')
      console.log('%c this.formData: ', 'color:red', this.formData)
      var params = {
        ...this.formData,
        CompanyId: this.$route.query.cid,
        TemplateId: this.$route.query.tid
      }
      save(params).then(resp => {
        console.log('xxxxxxxx 提交 resp xxxxxxxxxx: ', resp)
        if (!resp.code && resp.success) {
          vm.$Toast.success(resp.message)
          this.$router.replace({path: 'success', query: {cid: this.$route.query.cid, tid: this.$route.query.tid}});
          this.idCardFrontImg = null;
          this.idCardBackImg = null;
        } else {
          Dialog({ message: (resp && resp.message) || '错误！' })
          this.canSubmit = true;
        }
      })
    },
    // 图片获取完成
    success(data) {
      const { smallImg, typeKey } = data;
      this.getImgInfo(smallImg, typeKey);
    },
    // 图片识别文字
    getImgInfo(smallImg, typeKey) {
      console.log('%c typeKey: ', 'color:red', typeKey)
      const fd = new FormData();
      fd.append("file", smallImg);
      // fd.append("imgType", 0);
      if (typeKey == 'front') {
        analyseFront(this.$route.query.cid, fd).then(resp => {
          console.log('☆ 图片识别文字 身份证正面 resp: ', resp)
          if (!resp.code && resp.success || resp.code == 'CheckConfirm') {
            vm.$Toast.success(resp.message)
            this.valuationData(typeKey, resp)
            if (resp.code == 'CheckConfirm') {
              this.isCheckConfirm = true;
            } else {
              this.isCheckConfirm = false;
            }
          } else {
            Dialog({ message: (resp && resp.message) || '错误！' })
            this.$refs[typeKey].reset();
            Object.keys(this.formData).forEach(key => {
              let arr = ['IDType', 'IDTypeStr']
              if (arr.indexOf(key) == -1) {
                this.formData[key] = null;
              }
            })
            this.isCheckConfirm = false;

            this.formData.IDCardFrontAttachmentId = null;
            this.idCardFrontImg = idCardFrontImg;
            this.formData.IDCardBackAttachmentId = null;
            this.idCardBackImg = idCardBackImg;
          }
        })
      } else if (typeKey == 'back') {
        analyseBack(this.$route.query.cid, fd).then(resp => {
          console.log('☆ 图片识别文字 身份证背面 resp: ', resp)
          if (!resp.code && resp.success) {
            vm.$Toast.success(resp.message)
            this.valuationData(typeKey, resp)
          } else {
            Dialog({ message: (resp && resp.message) || '错误！' })
            this.$refs[typeKey].reset();
          }
        })
      } else if (typeKey == 'bank') {
        analyseBank(this.$route.query.cid, fd).then(resp => {
          console.log('☆ 图片识别文字 银行卡正面 resp: ', resp)
          if (!resp.code && resp.success) {
            vm.$Toast.success(resp.message)
            this.valuationData(typeKey, resp)
          } else {
            Dialog({ message: (resp && resp.message) || '错误！' })
            this.$refs[typeKey].reset();
          }
        })
      }
    },

    // 重选图片，重置字段
    resetImg(typeKey) {
      this.valuationData(typeKey);
    },

    // 字段统一赋值操作
    valuationData(typeKey, data) {
      console.log('❤ 字段统一赋值操作 data: ', data)
      if (data) {
        const values = data.data
        if (typeKey === "front") {
          // 正面
          Object.keys(this.formData).forEach(key => {
            // console.log('key: ', key)
            let nk = key.replace(key[0],key[0].toLowerCase())
            // console.log('nk: ', nk, ', key: ', key)
            let arr = [
              {LowerCaseKey: 'sex', UpperCaseKeyStr: 'SexStr'},
              {LowerCaseKey: 'maritalStatus', UpperCaseKeyStr: 'MaritalStatusStr'},
              {LowerCaseKey: 'hasChildren', UpperCaseKeyStr: 'HasChildrenStr'},
              {LowerCaseKey: 'degree', UpperCaseKeyStr: 'DegreeStr'},
              {LowerCaseKey: 'employeeType', UpperCaseKeyStr: 'EmployeeTypeStr'},
              {LowerCaseKey: 'beHiring', UpperCaseKeyStr: 'BeHiringStr'},
              {LowerCaseKey: 'salaryBank', UpperCaseKeyStr: 'SalaryBankStr'},
            ]
            arr.map(ot => {
              this.getOpsVal(ot.LowerCaseKey, ot.UpperCaseKeyStr, ot.UpperCaseKeyStr, values)
            })
            if (key == 'IDTypeStr') {
              this.formData.IDType = 0
              this.formData.IDTypeStr = '中国居民身份证';
            } else if (key == 'BirthDayStr') {
              this.formData.BirthDay = values.birthDay && moment(values.birthDay).format("YYYY-MM-DD") || this.formData[key] || null;
            } else if (key == 'OnBoardingDate') {
              this.formData.OnBoardingDate = values.onBoardingDate && moment(values.onBoardingDate).format("YYYY-MM-DD") || this.formData[key] || null;
            } else if (key == 'GraduationDate') {
              this.formData.GraduationDate = values.graduationDate && moment(values.graduationDate).format("YYYY-MM-DD") || this.formData[key] || null;
            } else if (key == 'CityStr' && values.city) {
              let cityStr = values.city.slice(1, -1)
              this.formData.CityStr = this.areaTree ? (this.getTreeNames(cityStr.split(','))).join('/') : null;
              this.formData.City = cityStr.split(',');
            } else {
              this.formData[key] = values[nk] && values[nk] || this.formData[key]
            }
          })
          
          this.formData.IDCardFrontAttachmentId = data.idCardFront.attachmentId;
          this.formData.IDCardBackAttachmentId = null;
          this.idCardBackImg = idCardBackImg;
          console.log('%c 解析身份证正面后 this.formData: ', 'color: blue', this.formData)

          // 存在当前员工入职信息的情况下会带出背面信息及银行卡信息
          if (values.id) {
            this.valuationIDCardBackInfo(data)
            this.valuationBankInfo(values)
          }

          this.handleIDCardFrontDisabled()
        } else if (typeKey == 'back') {
          this.valuationIDCardBackInfo(data)
        } else if (typeKey == 'bank') {
          this.valuationBankInfo(values)
        }
      }
    },

    getOpsVal(LowerCaseKey, UpperCaseKeyStr, key, values) {
      // console.log('%c ☆ LowerCaseKey: ', 'color: green', LowerCaseKey, ' -- ', UpperCaseKeyStr, ' -- ', key)
      let item = (this.formConfig.find(row => {return row.code == key.replace('Str', '')}));
      // console.log('item: ', item)
      if (item && item.source) {
        let str = item.source.find(ops => {return ops.value == values[LowerCaseKey]})
        // console.log('str: ', str)
        if (str) {
          this.formData[LowerCaseKey] = str.value;
          this.formData[UpperCaseKeyStr] = str.text;
        }
      }
    },

    // 赋值身份证背面信息
    valuationIDCardBackInfo(data) {
      console.log('身份证背面信息 data: ', data)
      if (data) {
        const values = data.data
        this.formData.IdCardStartTime = values.idCardStartTime && moment(values.idCardStartTime).format("YYYY-MM-DD") || null;
        this.formData.IdCardEndTime = values.idCardEndTime && moment(values.idCardEndTime).format("YYYY-MM-DD") || null;
        this.formData.IDCardBackAttachmentId = data.idCardBack ? data.idCardBack.attachmentId : values.attachmentId;
        this.idCardBackImg = data.idCardBack ? AppConfig.imgURL + data.idCardBack.filePath : AppConfig.imgURL + values.filePath;
      }
    },

    // 赋值银行卡正面信息
    valuationBankInfo(values) {
      this.formData.BankName = values.bankName || null;
      this.formData.AccountNo = values.accountNo || null;
    },

    // 身份证正面信息禁用
    handleIDCardFrontDisabled() {
      // const arr = ['Name', 'IdCardAddress', 'IdCardNo', 'IDType', 'Sex', 'Race', 'Age', 'BirthDay'];
      const arr = ['IdCardNo', 'IDType'];
      this.formConfig.map(row => {
        if (arr.indexOf(row.code) != -1) {
          row.enabled = false
        }
      })
      return this.formConfig
    },

    // 身份证背面信息禁用
    handleIDCardBackDisabled() {
      const arr = ['IdCardStartTime', 'IdCardEndTime'];
      this.formConfig.map(row => {
        if (arr.indexOf(row.code) != -1) {
          row.enabled = false
        }
      })
      return this.formConfig
    },

    // 银行卡正面信息禁用
    handleBankDisabled() {
      const arr = ['BankName', 'AccountNo'];
      this.formConfig.map(row => {
        if (arr.indexOf(row.code) != -1) {
          row.enabled = false
        }
      })
      return this.formConfig
    }
  },
};
</script>

<style lang='stylus' scoped>
.idCard-wrap
  width 100%
  display flex
  font-size 0
  justify-content space-between
  .img-item
    width 49%
.form-wrap
  padding 18px 0
  & .van-field
    padding 4.5px 0
    &::after
      display none
  & >>> .van-field__label
    width 7em
    text-align right
    color #99ACBF
    font-size 15px
    display inline-flex
    line-height 1.1em
    align-items center
    flex-direction row-reverse
    height 36px
  & >>> .van-field__control
    height 36px
    padding 0 5px
    &:disabled
      color #99acbf
      -webkit-text-fill-color #99acbf
      background #fff
  & >>> .van-field__body
    min-height 36px
    background #F4F7F8
    border-radius 5px
    box-sizing border-box
  .button-wrap
    display flex
    justify-content center
    margin 25px 0
    cursor pointer
    & >>> .van-button
      display inline-flex
      width auto
      height 42px
      padding 0
      background #0DC2FF
      box-shadow 0px 5px 5px 0px rgba(13, 194, 255, 0.35)
      border none
    & >>> .van-button__content
      display inline-flex
      padding 0 33px
  .bank-box
    padding-left 7em
    line-height 2em
    font-size 15px
    overflow hidden
    & >>> .bank-icon
      margin-left 12px
      font-size 18px
      float left
    & >>> .bank-txt
      padding-left 6px
      padding-top 2px
      font-size 13px
      float left
      color #1989fa

</style>
<style>
.van-cell--required::before{
  top: 10px;
  left: 0;
  display: none;
}
.form-wrap .van-field.van-cell--required .van-field__label span::before{
  content: "* ";
  color: red
}
</style>